<template>
  <div class="example example1">
    <h2>使用aspectRatio属性</h2>
    <video
      id="my-player"
      class="video-js"
      controls
      preload="auto"
      poster="//vjs.zencdn.net/v/oceans.png"
    >
      <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"/>
    </video>
    <h2>使用class属性</h2>
    <video
      id="my-player2"
      class="video-js vjs-1-1"
      controls
      preload="auto"
      poster="//vjs.zencdn.net/v/oceans.png"
    >
      <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"/>
    </video>
  </div>
</template>
<script>
// 引入video.js相关的js和css
import videojs from 'video.js'
import "video.js/dist/video-js.min.css"
export default {
  name: 'App',
  mounted(){

    // 设置aspectRatio
    let options = {width:960,height:400,aspectRatio:'4:3'}
    videojs('my-player', options, function() {
      videojs.log('播放器准备好了!');
    });


    // 设置class
    videojs('my-player2', {}, function() {
      videojs.log('播放器准备好了!');
    });
  }
}
</script>
<style>
.example{
  width: 1000px;
  margin: auto;
  padding: 20px;
}
</style>

